<template>
  <div class="chat-list-bg">
    <!-- 头部 -->
    <div class="chat-list-header">
      <van-icon name="arrow-left" class="chat-list-back" @click="goBack" />
      聊天
      <van-icon name="search" class="chat-list-search" @click="showSearch" />
    </div>

    <!-- 聊天列表 -->
    <div class="chat-list-content">
      <div
        v-for="chat in chatList"
        :key="chat.id"
        class="chat-item"
        @click="goToChat(chat)"
      >
        <div class="chat-avatar-wrapper">
          <img class="chat-avatar" :src="chat.avatar" />
          <div v-if="chat.unreadCount > 0" class="chat-badge">{{ chat.unreadCount }}</div>
        </div>
        <div class="chat-info">
          <div class="chat-top">
            <span class="chat-name">{{ chat.name }}</span>
            <span class="chat-time">{{ formatTime(chat.lastTime) }}</span>
          </div>
          <div class="chat-bottom">
            <span class="chat-message">{{ chat.lastMessage }}</span>
            <van-icon v-if="chat.isMuted" name="volume-o" class="chat-muted" />
          </div>
        </div>
      </div>
    </div>

    <!-- 搜索弹窗 -->
    <van-popup
      v-model="showSearchPopup"
      position="top"
      :style="{ height: 'auto' }"
    >
      <div class="search-popup">
        <van-search
          v-model="searchKeyword"
          placeholder="搜索聊天"
          show-action
          @search="onSearch"
          @cancel="onSearchCancel"
        />
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'ChatList',
  data() {
    return {
      chatList: [
        {
          id: '1',
          name: '张三',
          avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
          lastMessage: '好的，我会尽快处理',
          lastTime: new Date(Date.now() - 300000),
          unreadCount: 2,
          isMuted: false
        },
        {
          id: '2',
          name: '李四',
          avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
          lastMessage: '项目进展如何？',
          lastTime: new Date(Date.now() - 1800000),
          unreadCount: 0,
          isMuted: true
        },
        {
          id: '3',
          name: '王五',
          avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
          lastMessage: '收到，谢谢！',
          lastTime: new Date(Date.now() - 3600000),
          unreadCount: 1,
          isMuted: false
        }
      ],
      showSearchPopup: false,
      searchKeyword: ''
    }
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    goToChat(chat) {
      this.$router.push({
        path: '/chat',
        query: {
          userId: chat.id,
          userName: chat.name,
          userAvatar: chat.avatar
        }
      });
    },
    formatTime(time) {
      const now = new Date();
      const messageTime = new Date(time);
      const diff = now - messageTime;
      
      if (diff < 60000) { // 1分钟内
        return '刚刚';
      } else if (diff < 3600000) { // 1小时内
        return `${Math.floor(diff / 60000)}分钟前`;
      } else if (diff < 86400000) { // 24小时内
        return `${Math.floor(diff / 3600000)}小时前`;
      } else {
        return messageTime.toLocaleDateString();
      }
    },
    showSearch() {
      this.showSearchPopup = true;
    },
    onSearch() {
      // 实现搜索逻辑
      console.log('搜索:', this.searchKeyword);
      this.showSearchPopup = false;
    },
    onSearchCancel() {
      this.searchKeyword = '';
      this.showSearchPopup = false;
    }
  }
}
</script>

<style scoped>
.chat-list-bg {
  min-height: 100vh;
  background: #f5f5f5;
}

.chat-list-header {
  background: #1677ff;
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  padding: 18px 0 12px 0;
  letter-spacing: 2px;
  position: relative;
}

.chat-list-back {
  position: absolute;
  left: 18px;
  top: 18px;
  font-size: 22px;
  color: #fff;
  cursor: pointer;
}

.chat-list-search {
  position: absolute;
  right: 18px;
  top: 18px;
  font-size: 22px;
  color: #fff;
  cursor: pointer;
}

.chat-list-content {
  padding: 16px;
}

.chat-item {
  display: flex;
  align-items: center;
  padding: 16px;
  background: #fff;
  border-radius: 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s;
}

.chat-item:hover {
  transform: translateY(-2px);
}

.chat-avatar-wrapper {
  position: relative;
  margin-right: 12px;
}

.chat-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.chat-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ff3b30;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  border-radius: 10px;
  padding: 2px 6px;
  min-width: 18px;
  text-align: center;
}

.chat-info {
  flex: 1;
  min-width: 0;
}

.chat-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.chat-name {
  font-size: 16px;
  font-weight: 600;
  color: #222;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-time {
  font-size: 12px;
  color: #999;
  white-space: nowrap;
  margin-left: 8px;
}

.chat-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-message {
  font-size: 14px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.chat-muted {
  font-size: 16px;
  color: #999;
  margin-left: 8px;
}

.search-popup {
  background: #fff;
  padding: 16px;
}
</style> 